import { FC, useCallback, useState, memo } from 'react';
import styles from './minerOnlineChart.module.less';
import { DatePicker, Radio } from 'antd';
import moment from 'moment';
import MinerOnlineBase, {
  IMinerOnlineChart,
} from '@/components/charts/MinerOnlineBase';

interface IMinerOnlineChartProps {
  onChangeDate?: (date: moment.Moment) => void;
  onChangeDay?: (day: number) => void;
}

const MinerOnlineChart: FC<IMinerOnlineChartProps & IMinerOnlineChart> = (
  props,
) => {
  const [date, setDate] = useState<moment.Moment | null>(moment());
  const [day, setDay] = useState(1);
  const handleChangeDate = useCallback(
    (date) => {
      setDate(date);
      props.onChangeDate && props.onChangeDate(date);
    },
    [setDate],
  );
  const handleChangeDay = useCallback((day: number) => {
    setDay(day);
    props.onChangeDay && props.onChangeDay(day);
  }, []);
  return (
    <div className={styles.onlineChartWrap}>
      <div className={`flex ai-center jc-end ${styles.onlineChartTool}`}>
        <DatePicker
          defaultValue={moment()}
          value={date}
          onChange={handleChangeDate}
          size="small"
        />
        <Radio.Group
          defaultValue={day}
          optionType="button"
          buttonStyle="solid"
          onChange={(e) => handleChangeDay(e.target.value)}
          style={{ marginLeft: '16px' }}
          size="small"
        >
          <Radio.Button value={1}>D</Radio.Button>
          <Radio.Button value={7}>W</Radio.Button>
          <Radio.Button value={30}>M</Radio.Button>
        </Radio.Group>
      </div>

      <div className={styles.minerOnlineChartWrap}>
        <MinerOnlineBase xAxis={props.xAxis} dataList={props.dataList} />
      </div>
    </div>
  );
};

export default memo(MinerOnlineChart);
